<template>
  <div class="carList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>优惠卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠卷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询新增操作 -->
    <Search @search="search" @add='add' :type="type"></Search>
    <!-- 表体部分 -->
    <div class="contain">
      <el-table
        :data="carList"
        border
        style="width: 100">
        <el-table-column
          type="index"
          width="100">
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车牌"
          width="220">
        </el-table-column>
        <el-table-column
          prop="type"
          label="车型"
          width="190">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="剩余油量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="gear"
          label="类型"
          width="136">
        </el-table-column>
        <el-table-column
          prop="startPrice"
          label="起步价"
          width="180">
        </el-table-column>
        <el-table-column
          prop='estimate'
          label="预计行驶距离"
          width="168">
        </el-table-column>
        <el-table-column
          prop='lngLat'
          label="经纬度"
          width="350">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scoped">
            <el-button type="primary" size="small" @click="carChange(scoped.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <!-- <Pagenation :params='params' :total='total' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'></Pagenation> -->
    <div class="pagenation">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <!-- 修改用户弹框 -->
    <el-dialog
      title="修改车辆信息"
      :visible.sync="dialogEdit"
      width="45%">
      <el-form :model="car" label-width="130px" ref="formEdit">
        <el-form-item label="车牌">
          <el-input v-model="car.licensePlate"></el-input>
        </el-form-item>
        <el-form-item label="车型">
          <el-input v-model="car.type"></el-input>
        </el-form-item>
          <el-form-item label="油量/电量">
            <el-input v-model="car.quantity"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="car.gear"></el-input>
          </el-form-item>
          <el-form-item label="起步价">
            <el-input v-model="car.startPrice"></el-input>
          </el-form-item>
          <el-form-item label="预计行驶距离">
            <el-input v-model="car.estimate"></el-input>
          </el-form-item>
          <el-form-item label="经纬度">
            <el-input v-model="car.lngLat"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditMethod">取 消</el-button>
        <el-button type="primary" @click="dialogEditSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增优惠卷 -->
    <el-dialog
      title="添加车辆信息"
      :visible.sync="dialogAdd"
      width="45%">
      <el-form :model="car" label-width="130px" ref="formEdit">
        <el-form-item label="车牌">
          <el-input v-model="car.licensePlate"></el-input>
        </el-form-item>
        <el-form-item label="车型">
          <el-input v-model="car.type"></el-input>
        </el-form-item>
          <el-form-item label="油量/电量">
            <el-input v-model="car.quantity"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="car.gear"></el-input>
          </el-form-item>
          <el-form-item label="起步价">
            <el-input v-model="car.startPrice"></el-input>
          </el-form-item>
          <el-form-item label="预计行驶距离">
            <el-input v-model="car.estimate"></el-input>
          </el-form-item>
          <el-form-item label="经纬度">
            <el-input v-model="car.lngLat"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddMethod">取 消</el-button>
        <el-button type="primary" @click="dialogAddSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Search from '../../components/search'
import request from '@/utils/request'

export default {
  name: 'CarList',
  components: {
    Search
    // Pagenation
  },
  data () {
    return {
      carList: [],
      params: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      dialogEdit: false,
      dialogDelete: false,
      car: {},
      newCar: {},
      dialogAdd: false,
      type: 2,
      licensePlate: '',
      carType: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const { data: res } = await request.postJson('/getAllCars', {
        pageSize: this.pagesize,
        pageNum: this.pagenum
      })
      this.carList = res.rows
      console.log(this.carList)
      this.total = res.total
    },
    // 监听pagesize改变事件
    handleSizeChange (newsize) {
      console.log(newsize)
      this.pagesize = newsize
      this.getData()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.pagenum = newpage
      this.getData()
    },
    // 修改车辆信息
    carChange (row) {
      this.car = row
      this.dialogEdit = true
    },
    dialogEditMethod () {
      this.dialogEdit = false
    },
    async dialogEditSure () {
      const { data: res } = await request.postJson('/updateCar', this.car)
      this.dialogEdit = false
      console.log(res)
    },
    dialogDeleteMethod () {
      this.dialogDelete = false
    },
    carDelete (row) {
      this.car = row
      this.dialogDelete = true
      console.log(row)
    },
    async search (data) {
      this.carType = data.type
      this.licensePlate = data.licensePlate
      const { data: res } = await request.postJson('/getAllCars', {
        type: this.carType,
        licensePlate: this.licensePlate
      })
      console.log(res)
      this.carList = res.rows
    },
    dialogAddMethod () {
      this.dialogAdd = false
    },
    async dialogAddSure () {
      const { data: res } = await await request.postJson('/addCar', this.car)
      console.log(res)
      this.getData()
      this.dialogAdd = false
    },
    add (data) {
      this.dialogAdd = data
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
